<template>
	<div class="spec-preview" @mousemove="mouseMove">
		<img v-show="imgUrl" :src="imgUrl" />
		<div class="event"></div>
		<div class="big">
			<img v-show="imgUrl" :src="imgUrl" ref="bigImg" />
		</div>
		<div class="mask" ref="mask"></div>
	</div>
</template>

<script>
export default {
	name: "Zoom",
	props: ["skuDefaultImg"],
	data() {
		return {
			imgUrl: "",
		};
	},
	mounted() {
		// 初始绑定一个自定义事件,用来接收imageList组件的传递的图片地址
		// 给$bus绑定自定义事件,需要使用箭头函数作为回调函数,因为普通函数的this指向vue实例
		this.$bus.$on("geiDetailImgUrl", (imgUrl) => {
			console.log(imgUrl);
			this.imgUrl = imgUrl;
		});
	},
	methods: {
		// 1.鼠标在放大镜上移动事件函数
		mouseMove(e) {
			const oMask = this.$refs.mask;
			const oBigImg = this.$refs.bigImg;
			// 获取鼠标到容器边缘的距离
			const mouseToBox = {
				x: e.offsetX,
				y: e.offsetY,
			};
			// 获取mask元素的一半的宽高
			const maskWH = {
				x: oMask.offsetWidth / 2,
				y: oMask.offsetHeight / 2,
			};
			// 计算mask需要移动的距离
			const maskMove = {
				x: mouseToBox.x - maskWH.x,
				y: mouseToBox.y - maskWH.y,
			};
			// 判断临界值
			if (maskMove.x < 0) {
				maskMove.x = 0;
			} else if (maskMove.x > e.target.clientWidth - oMask.offsetWidth) {
				maskMove.x = e.target.clientWidth - oMask.offsetWidth;
			}

			if (maskMove.y < 0) {
				maskMove.y = 0;
			} else if (maskMove.y > e.target.clientHeight - oMask.offsetHeight) {
				maskMove.y = e.target.clientHeight - oMask.offsetHeight;
			}

			//赋值
			oMask.style.left = maskMove.x + "px";
			oMask.style.top = maskMove.y + "px";

			//控制大图移动
			oBigImg.style.left = -maskMove.x * 2 + "px";
			oBigImg.style.top = -maskMove.y * 2 + "px";
		},
	},
	watch: {
		skuDefaultImg(newVal) {
			this.imgUrl = newVal;
		},
	},
};
</script>

<style lang="less">
.spec-preview {
	position: relative;
	width: 400px;
	height: 400px;
	border: 1px solid #ccc;

	img {
		width: 100%;
		height: 100%;
	}

	.event {
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 998;
	}

	.mask {
		width: 50%;
		height: 50%;
		background-color: rgba(0, 255, 0, 0.3);
		position: absolute;
		left: 0;
		top: 0;
		display: none;
	}

	.big {
		width: 100%;
		height: 100%;
		position: absolute;
		top: -1px;
		left: 100%;
		border: 1px solid #aaa;
		overflow: hidden;
		z-index: 998;
		display: none;
		background: white;

		img {
			width: 200%;
			max-width: 200%;
			height: 200%;
			position: absolute;
			left: 0;
			top: 0;
		}
	}

	.event:hover ~ .mask,
	.event:hover ~ .big {
		display: block;
	}
}
</style>
